<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="path"
      :columns="columns"
      :init-param="initParam"
      :request-api="getTableList"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增菜单 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="Plus" @click="openDrawer('新增', scope.row)"> 添加子菜单 </el-button>
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteMenu(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <Dawer ref="drawerRef" />
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { reactive, ref } from "vue";
import Dawer from "./components/dawer.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus, Plus } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { useAuthStore } from "@/stores/modules/auth";
import { PostMenu, PutMenu, deleteMenus } from "@/api/modules/menu";
import { showFullScreenLoading, tryHideFullScreenLoading } from "@/components/Loading/fullScreen";
import { getAuthMenuListApi } from "@/api/modules/login";
import { useHandleData } from "@/hooks/useHandleData";
const proTable = ref<ProTableInstance>();
const initParam = reactive({ type: 1 });
const getTableList = () => {
  showFullScreenLoading(); // 👈 开启 loading
  tryHideFullScreenLoading(); // 👈 关闭 loading
  return getAuthMenuListApi();
};
const dataCallback = (data: any) => {
  return {
    list: data,
    total: data.total
  };
};
// 表格配置项
const columns = reactive<ColumnProps<Menu.MenuOptions>[]>([
  { prop: "meta.title", label: "菜单名称", align: "left" },
  { prop: "meta.icon", label: "菜单图标" },
  { prop: "name", label: "菜单 name" },
  { prop: "path", label: "菜单路径", width: 300 },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "operation", label: "操作", fixed: "right" }
]);
//删除菜单
const deleteMenu = async (params: Menu.MenuOptions) => {
  await useHandleData(deleteMenus, params.id, `删除【${params.meta.title}】菜单`);
};
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof Dawer> | null>(null);
const openDrawer = (title: string, row: Partial<Menu.MenuOptions> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title == "新增" ? PostMenu : title === "编辑" ? PutMenu : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>
